<template>
	<view @click="dismiss" class="layer" v-if="isShow">
		<view class="top-gifts" v-if='from!="chat"'>
			<u-icon name="gift" color="#FF5998" size="32"></u-icon>
			<text>送礼物好感度更高哦～</text>
		</view>
		<view @click.stop="bottomClick" class="layer_bottom">
			<view class="text-view-box" v-if='from!="chat"'>
				<input type="text" value="" v-model="inputValue" confirm-type="done" placeholder-class="placeholder_text"
				 placeholder="看到你就觉得非常有眼缘，可以认识一下吗？" />
				<image @click.stop="showEmoAction()" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702645292,997656978&fm=26&gp=0.jpg"></image>
			</view>
			<view class="roses-title-view">
				<text>我的玫瑰：</text>
				<text>{{getMyroseCount()}}</text>
				<image src="../../../static/images/mall/flower@2x.png"></image>
			</view>

			<scroll-view v-if="!showPannel" class="scroll-container" scroll-y="true">
				<view class="flower-wrap-box">
					<view @click.stop="iconClickAction(index)" class="wrap-item" v-for="(item, index) in giftsData.gifts" :key="item._id">
						<view :class="[activity(index) ? 'wrap-item-back' : '']"></view>
						<image @click.stop="iconClickAction(index)" :src="item.icon" mode="aspectFit"></image>
						<view class="flower-text">{{item.label || ""}}</view>
						<view class="flower-text">{{item.cost || 1 }}支</view>
					</view>
				</view>
			</scroll-view>
			<swiper v-if="showPannel" class="slider">
				<swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji">
					<text v-for="(emoji, index) in item" :key="index" @click="selemoji(emoji)">{{ emoji }}</text>
				</swiper-item>
			</swiper>
			<view class="bottom-container">
				<view class="bottom-left">
					<text>送给</text>
					<image :src="giftsData.userInfo.avatar || 'http://static.kuaimayoupin.com/5814340611455953.png'"></image>
				</view>

				<view @click.stop="sendGiftAction" class="sure-btn">
					<text> 确定 </text>
				</view>
			</view>
		</view>
		<roseNotEnoughDialog :isShow="showRoseNotEnoughDialog" :roseData="roseData" v-on:dismiss="roseNotEnoughDismiss"></roseNotEnoughDialog>
		<roseGiveDialog :roseData="roseData" :isShow="showRoseGiveDialog" v-on:roseGiveSure="roseGiveSure" v-on:dismiss="showRoseGiveAction"></roseGiveDialog>
	</view>
</template>

<script>
	import emoji from "@/components/emoji.js";
	import {
		loadVipinfo
	} from '@/api/user/user.js';
	import {
		sendGifts,
		greetSend,
		apply
	} from '@/api/home/home.js'
	import roseNotEnoughDialog from '@/pages/home/components/rose-notenough-dialog.vue'
	import roseGiveDialog from '@/pages/home/components/rose-give-dialog.vue';
	/// 关注对话框
	import helloGiftView from '@/pages/home/components/hello-gift-view.vue';
	export default {
		components: {
			roseNotEnoughDialog,
			roseGiveDialog,
			helloGiftView,
			roseGiveDialog
		},
		props: {
			from: '',
			isShow: Boolean,
			giftsData: Object,
		},
		created() {
			var page = Math.ceil(emoji.length / 21);
			for (let i = 0; i < page; i++) {
				this.emojiData[i] = [];
				for (let k = 0; k < 21; k++) {
					emoji[i * 21 + k] ? this.emojiData[i].push(emoji[i * 21 + k]) : ''
				}
			}
		},
		mounted() {
			this.meCount = this.getMeCount()
		},
		watch: {
			isShow() {
				this.selectedIndex = -1
				this.showPannel = false
				this.meCount = this.getMeCount()
				this.inputValue = ""
			}
		},

		data() {
			return {
				chooseGiftItem:{},
				showRoseNotEnoughDialog: false,
				selectedIndex: -1,
				roseData: {},
				showRoseGiveDialog: false,
				meCount: 0,
				inputValue: "",
				showPannel: false,
				emojiData: [],
			}
		},
		methods: {
			getMyroseCount(){
				let vipInfo = uni.getStorageSync('vipInfo') || {};
				return vipInfo.balance || 0
			},
			dismiss() {
				console.log("dismiss")
				this.$emit("dismiss")
			},
			bottomClick() {
				
				console.log("bottom click")
			},
			sendGiftAction() {
				let note = this.inputValue || ""
				if (note === "") {
					// uni.showToast({
					// 	title: "请输入内容"
					// })
					// return
					note = "看到你就觉得非常有眼缘，可以认识一下吗？"
				}
				let meCount = this.getMeCount()
				console.log("sendGiftAction")
				if (this.selectedIndex < 0) {
					uni.showToast({
						title: "请选择你要送的礼物",
						icon: "none"
					})
				} else {
					if (this.roseData.sendCount > meCount) {
						this.showRoseNotEnoughDialog = true
					} else {
						if (uni.getStorageSync('roseGiveAlertTag') || false) {
							this.roseGiveSure()
						} else {
							this.showRoseGiveDialog = true
						}
					}

				}

			},
			selemoji(m) {
				// console.log(this.$refs.text.selectionStart)
				this.inputValue += m
			},
			// 点击表情
			showEmoAction() {
				this.showPannel = !this.showPannel;
			},
			/// 确定发送
			roseGiveSure() {
				console.log('userInfo',this.giftsData.userInfo)
				// return
				let userInfo = this.giftsData.userInfo || {}
				let gift_id = this.roseData.id || ""
				let note = this.inputValue || ""
				if (gift_id === "") {
					uni.showToast({
						title: "请选择你要送的礼物"
					})
					return
				}

				let data = {
					user_id: userInfo.user_id || "",
					gift_id: gift_id,
					note: note
				}
				let data1 = {
					toUserID: userInfo.user_id || "",
					giftID: gift_id,
					note: note
				}
				sendGifts(data1).then(res => {
					
				})
				greetSend(data).then(res => {
					if (res.status == 1) {
						var parios = {
							message : note,
							messageType : 2,
							userID : userInfo.user_id
						}
						console.log(this.giftsData.userInfo);
						this.dismiss()
						this.refreshMyRoseCount()
						if(this.from=="chat"){
							console.log(this.roseData)
							this.$emit('sendGift',
							{
								chooseGiftItem: this.chooseGiftItem,
								roseData: this.roseData
							})
							return
						}
						
						uni.showToast({
							title: "打招呼成功"
						})
						
					}
				})
				
			},
			helloActionRequest() {
				let userInfo = this.giftsData.userInfo || {}
				let note = this.inputValue
				let data = {
					user_id: userInfo.user_id || "",
					gift_id: this.roseData.id || ""
				}
				greetSend(data).then(res => {
					if (res.status == 1) {
						uni.showToast({
							title: "打招呼成功"
						})
						this.dismiss()
						this.refreshMyRoseCount()
					}
					console.log("rose-give-res-------", res);
				})
			},
			refreshMyRoseCount() {
				loadVipinfo().then(res => {
					if (res.status == 1) {
						uni.setStorageSync('vipInfo', res.data);
						getApp().globalData.vipInfo = res.data;
						console.log("this.globalData.vipInfo-------=", getApp().globalData.vipInfo);
					}
				});
			},

			getMeCount() {
				let vipInfo = getApp().globalData.vipInfo || {}
				return vipInfo.balance || 0
			},
			roseNotEnoughDismiss() {
				this.showRoseNotEnoughDialog = false
			},
			showRoseGiveAction(show) {
				this.showRoseGiveDialog = show
			},
			activity(index) {
				return index === this.selectedIndex
			},
			iconClickAction(index) {
				this.selectedIndex = index
				let vipInfo = getApp().globalData.vipInfo || {}
				let meCount = vipInfo.balance || 0
				let item = this.giftsData.gifts[this.selectedIndex]
				// let price = item.price || 1
				this.chooseGiftItem = item
				let price = item.cost || 1
				this.roseData = {
					meCount: meCount,
					sendCount: price,
					id: item._id || ""
				}
			},
			gitIcon(item) {
				let icon = item.icon || ""
				if (icon === "") {
					return "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4080252403,1346737740&fm=26&gp=0.jpg"
				} else {
					return icon
				}
			},


		},
		mounted() {
			console.log("hello gift")
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
		display: flex;
	}

	.layer {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		position: relative;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: transparent;

		.top-gifts {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 346upx;
			height: 64upx;
			background: #FFEEF4;
			border-radius: 32upx;
			margin-bottom: 20upx;
			margin-left: 32upx;
			padding: 0 20upx;
			align-self: flex-start;

			text {
				margin-left: 12upx;
				font-size: 26upx;
				font-weight: 400;
				color: rgba(71, 74, 88, 1);
			}
		}

		.layer_bottom {
			display: flex;
			width: 750upx;
			height: 685upx;
			background-color: #FFFFFF;
			flex-direction: column;

			.text-view-box {
				display: flex;
				height: 88upx;
				width: 100%;
				border-top: 2upx solid #E9EBF0;
				border-bottom: 2upx solid #E9EBF0;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 36upx 0 26upx;

				input {
					width: 608upx;
					height: 64upx;
					background: #f3f6f8;
					border-radius: 4upx;
				}

				.placeholder_text {
					margin-left: 10upx;
					font-size: 30upx;
					font-weight: 400;
					color: rgba(71, 74, 88, 1);
				}

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			.roses-title-view {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 20upx 40upx;

				text {
					font-size: 26upx;
					font-weight: 500;
					color: rgba(71, 74, 88, 1);
					line-height: 36upx;
				}

				image {
					margin-left: 10upx;
					width: 28upx;
					height: 30upx;
				}
			}

			.slider {
				width: 100%;
				height: 256rpx;

				.slider-emoji {
					width: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: center;

					text {
						// width: 53%;
						text-align: center;
						padding: 21rpx 30rpx;
					}
				}
			}

			.scroll-container {
				display: flex;
				flex: 1;
				flex-direction: column;

				.flower-wrap-box {
					display: flex;
					flex-direction: row;
					width: 100%;
					flex-wrap: wrap;

					.wrap-item {
						position: relative;
						width: 25%;
						// height: 160upx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-bottom: 10upx;

						image {
							width: 100%;
							height: 140upx;
						}

						.flower-text {
							font-size: 24upx;
							font-weight: 400;
							color: rgba(71, 74, 88, 1);
							line-height: 36upx;
						}

						.wrap-item-back {
							position: absolute;
							top: 0;
							bottom: 0;
							width: 168rpx;
							height: 100%;
							background: linear-gradient(135deg, #FC4F91 0%, #FD6CE6 100%);
							border-radius: 8rpx;
							opacity: 0.12;
						}

					}

				}

			}

			.bottom-container {
				width: 100%;
				height: 88upx;
				display: flex;
				flex-direction: row;
				border-top: 2upx solid #E9EBF0;
				align-items: center;
				justify-content: space-between;
				padding: 0 32upx;

				.bottom-left {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 100%;

					text {
						color: #8389A0;
						font-size: 30upx;
						font-weight: 500;
						line-height: 42upx;
					}

					image {
						margin-left: 18upx;
						width: 56upx;
						height: 56upx;
						border-radius: 28upx;
					}
				}

				.sure-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120upx;
					height: 64upx;
					background: linear-gradient(135deg, rgba(252, 79, 145, 1) 0%, rgba(253, 108, 230, 1) 100%);
					border-radius: 4upx;

					text {
						font-size: 30upx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

			}
		}

	}
</style>
